<template>
    <div>
        <el-button type="primary" @click="handleOpen">增加</el-button>
        <el-dialog
            v-model="dialogVisible"
            title="增加学生"
            width="30%"
            :before-close="handleClose"
        >
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="80px"
            >
                <el-form-item label="上传头像">
                    <el-upload
                        class="avatar-uploader"
                        :action="apiUrl + '/upload'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"
                            ><Plus
                        /></el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="ruleForm.age" />
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="ruleForm.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item> 
                <el-form-item label="选择班级">
                    <el-select
                        v-model="ruleForm.classId"
                        placeholder="请选择班级"
                        size="large"
                    >
                        <el-option
                            v-for="item in classes"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineEmits } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { insert } from "../../service/student";
import {listAllClass} from '../../service/class';
import { url } from '../../service/index';
const emits = defineEmits(["show"]);
const apiUrl = ref(url);
const imageUrl = ref();
const dialogVisible = ref(false);
const classes = ref([]);
const ruleForm = ref({
    name: "",
    gender: "",
    age: "",

});
async function handleOpen() {
    let res = await listAllClass();
    classes.value = res.data;
    dialogVisible.value = true;
}
async function handleAdd() {
    console.log("insert", ruleForm);
    await insert(ruleForm.value);
    emits("show");
    dialogVisible.value = false;
}
function handleAvatarSuccess(res){
    imageUrl.value = `${url}/upload/${res}`;
    ruleForm.value.head = res;


}
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 128px;
    height: 128px;
    display: block;
}
.avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: #ccc;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    text-align: center;
    border: 1px dashed #8c939d;
}
</style>
